import 'package:flutter/material.dart';
import '../../../core/model/meal_model.dart';
import '../../../../screenLayout/size_fit.dart';

class BDDetailContent extends StatelessWidget {
  final BDMealModel mealModel;

  BDDetailContent(this.mealModel);

  @override
  Widget build(BuildContext context) {
//    SingleChildScrollView可以规避Column的超出边界的问题
//  Column套ListView的时候，需要设置ListView的高度，因为ListView是占据尽可能大的区域，会造成布局冲突，或者使用shrinkWrap属性解决
//  hasSize的报错首先要明确子widget是否有明确的高度
    return SingleChildScrollView(
      child: Column(
        children: [
          buildBannerImage(),
          makeTitle(context, "制作材料"),
          buildMakeMaterial(context),
          makeTitle(context, "制作步骤"),
          buildMakeSteps(),
        ],
      ),
    );
  }

//  1.横幅图片
  Widget buildBannerImage() {
    return Container(child: Image.network(mealModel.imageUrl));
  }

//  2.制作材料
  Widget buildMakeMaterial(BuildContext context) {
    return buildMakeContent(
        context:context,
        child:ListView.builder(
          padding: EdgeInsets.all(0),
          shrinkWrap: true,
//        控制是否可以滚动
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return Card(
              color: Colors.orangeAccent,
              child: Padding(
                child: Text(mealModel.ingredients[index]),
                padding: EdgeInsets.symmetric(vertical: 4.px, horizontal: 6.px),
              ),
            );
          },
          itemCount: mealModel.ingredients.length,
        ));
  }

//  3.制作步骤
  Widget buildMakeSteps() {
    return Text('制作步骤');
  }

//  公共方法
  Widget makeTitle(BuildContext context, String title) {
    return Container(
        padding: EdgeInsets.symmetric(vertical: 10.px),
        child: Text(
          title,
          style: Theme.of(context).textTheme.headline3,
        ));
  }

  Widget buildMakeContent({@required BuildContext context,@required Widget child}) {
    return Container(
      padding: EdgeInsets.all(8.px),
//      color: Colors.white,
//      height: mealModel.ingredients.length*35.px,
      width: MediaQuery.of(context).size.width - 30.px,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: Colors.grey,
        ),
        borderRadius: BorderRadius.circular(8.px),
      ),
      child: child,
    );
  }
}
